<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="includes.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<% String basePath = request.getContextPath(); %>
<% String baseCSSPath = request.getContextPath()+"/resources/css";%>
<% String baseJSPath = request.getContextPath()+"/resources/js";%>
<% String baseImagePath = request.getContextPath()+"/resources/images";%>

<title>Art and Architecture</title>
<link href="<%=baseImagePath%>/favicon.png" rel="icon">

<link href="<%=baseCSSPath%>/stylesheet.css" rel="stylesheet" type="text/css" >
<script src="<%=baseJSPath %>/jquery-1.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/jquery_004.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/script.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/common.js" type="text/javascript" ></script>

<script language="javascript">

// $(document).ready(function() {
	
// });

function productdSearchButtonSubmit(){
	document.getElementById("myrequestType").value='search';
	$("#productListSearchForm").submit();
}

function pageTo(currentPage){
	 document.getElementById("myrequestType").value='pagination';
	 document.getElementById("currrentPageNum").value=currentPage;
// 	$("#requestType").value="pagination";
// 	$("#currrentPageNum").value=currentPage;
	$("#productListSearchForm").submit();
}
 
</script>
	
<style>

div.pagination {
		padding: 1px;
		margin: 2px;
		text-align:center;
		 
		font-size:80%;
	}
	
	div.pagination a {
		border: 1px solid  ;
		margin-right:2px;
		padding:3px 5px;

		background-position:bottom;
		text-decoration: none;

	}
	div.pagination a:hover, div.meneame a:active {
		border: 1px solid  ;
		background-image:none;
		background-color: #E87373;
		color: #494040;
	}
	div.pagination a.current {
		margin-right:2px;
		padding:3px 5px;
		border: 1px solid  ;
		font-weight: bold;
		background-color: #E87373;
		color: #494040;
		pointer-events: none;
	}
	div.pagination a.disabled {
		pointer-events: none;
	}

</style>

</head>

<body class="product-category">
	<div class="main-shining">
		
<p style="display: none;" id="back-top"> <a href="#top"><span></span></a> </p>
<div class="row-1">

		<%@ include file="header.jsp" %>

   </div>
<div id="container">

	<div id="notification"> </div><div id="column-left">
		<%@ include file="navMenu.jsp" %>
	</div>
 

 <div id="content">  
 
 <c:if test="${productList==null || fn:length(productList)==0 }">
 <center>  <font color="red">Sorry , the record can not be found!</font> </center>
 </c:if>
 
 <c:if test="${fn:length(productList)>0 }">
 
  <form method="get"  action="listProduct.html" id="productListSearchForm" >
  
      
      <div class="breadcrumb">
         <a href="">首页</a> »
         <a class="last" href="<%=basePath%>/product/productList.html" >商品列表</a>
      </div>
      
      <div class="box-container" style="border:1px solid #7E3117; margin-bottom:0px; padding-bottom:0px;">
      
         <div class="content" style="margin-bottom:0px; padding-bottom:0px;">
          
	          <table class="form" style="margin-bottom:0px; padding-bottom:0px;"> 
	          	<tbody>
		          	<tr>
		          	 	<td style="width:60px;"> 品牌:</td>
		          	 	<td> 
		          	 	<c:forEach var="category" items="${categoryList}" varStatus="status">
		          	 	        <form:checkbox path="productVO.categoryIds" value="${category.categoryId}"/>${category.categoryName}  &nbsp;&nbsp;
		          	 	        <c:if test="${status.count%8==0}">
		          	 	             <br>
		          	 	        </c:if>
		          	 	</c:forEach>
						</td>
		          	</tr>
		          	
		          	
		          	<tr>
		          	 	<td style="width:60px;"> 人群:</td>
		          	 	<td>  
		          	 		<form:checkbox  path="productVO.genders" value="male"/>男 &nbsp;&nbsp;
		          	 		<form:checkbox  path="productVO.genders" value="female"/>女 &nbsp;&nbsp;
		          	 		<form:checkbox  path="productVO.genders" value="couple"/>情侣 &nbsp;&nbsp;
		          	 		<form:checkbox  path="productVO.genders" value="kids"/>Kids &nbsp;&nbsp;
						</td>
		          	</tr>
		          	
 
		          	
		          	<tr>
		          	 	<td style="width:60px;"> 价格:</td>
		          	 	<td> 
		          	 	    <form:checkbox path="productVO.priceRangeStrs" value="0-50"/>少于50  &nbsp;&nbsp;
		          	 	    <form:checkbox path="productVO.priceRangeStrs" value="50-100"/>50-100  &nbsp;&nbsp;
		          	 	    <form:checkbox path="productVO.priceRangeStrs" value="100-200"/>100-200  &nbsp;&nbsp;
		          	 	    <form:checkbox path="productVO.priceRangeStrs" value="200-500"/>200-500  &nbsp;&nbsp;
		          	 	    <form:checkbox path="productVO.priceRangeStrs" value="500-10000000000"/>500 以上  &nbsp;&nbsp;
						</td>
		          	</tr>
	          	</tbody>
	          </table>
	          
	          <div class="buttons" style="margin-bottom:0px; padding-bottom:10px;">
		          <div class="right"><a id="productdSearchButton" onclick="productdSearchButtonSubmit();"   class="button"><span>查询</span></a></div>
        	  </div>
	          
          </div>
      
        
      </div>
      
      <br/>
      
      <%
	            com.commerceE.domain.Page curPage = (com.commerceE.domain.Page)request.getAttribute("page");
	            java.util.List<Long> numberList = curPage.getDisplayedPages() ;
	            int currentPageNumber = curPage.getCurrentPageNum();
	            int totlePageSize = curPage.getTotlePageSize();
	            int totleItemSize = curPage.getTotleItemSize();
	  %>
   
      <div class="product-filter">
	      <div class="sort"> 排序:
	           <form:select path="productVO.orderBy" items="${sortByMap}" onchange="pageTo(1);"/>
	     </div>
	     <div class="limit" >
	         	显示:
	         <form:select path="page.itemSizePerPage"  items="${pageLimitMap}"   onchange="pageTo(1);"/>
	     </div>
	    
	     <div class="display" style="  padding-let:20px;">
	    		 显示方式:   
	    		<div id="list_b"></div> 
	    		<a id="grid_a" onclick="display('grid');">Grid</a>
	     </div>
	     
	     <div class="product-compare" style="margin-bottom:0px; padding-bottom:0px;margin-top:0px; padding-top:0px;">
	         <div class="pagination">
	          <a onclick="pageTo(1)" 
	                        <%if(!curPage.firstPageButtonDisplayFlag){
				            		out.print("class='disabled'");
				              }%> 
				              >  首页 </a>
	           
	               
	          <%
	            for(int i=0;i <numberList.size();i++){
	          %>  	
	              <a onclick="pageTo(<%=numberList.get(i) %>)" 
				              <%if(numberList.get(i)==currentPageNumber){
				            		out.print("class='current'");
				              }%>
	               >  <%=numberList.get(i) %>  </a>
	          <%  
	          }
	          %>
	           
          
	           <a onclick="pageTo(<%=totlePageSize%>)"  
	           		     <%if(!curPage.lastPageButtonDisplayFlag){
				            		out.print("class='disabled'");
				              }%>
	           >  末页 </a>
	               
	    	 </div>
	    	 
	    	 <form:hidden path="page.currentPageNum" id="currrentPageNum"/>
	    	 <form:hidden path="page.requestType" id="myrequestType"/>
	    	 <form:hidden path="page.itemSizePerPage" />
	     </div>
	   
    </div>

  <div class="product-list">
    <ul>
    <c:forEach var="product" items="${productList}" varStatus="status">
								<c:choose>
							      <c:when test="${status.count==1}"> 
							     		<li class="first-in-line">
							      </c:when>
							      <c:when test="${status.count==fn:length(featuredProductList)}"> 
							     		<li class="last-in-line">
							      </c:when>
							      <c:otherwise>
										<li>
							      </c:otherwise>
							   </c:choose>
							   
    
    <div class="right">
			<div class="price">
				<span class="price-new"> ¥ ${product.discountPrice}</span><span class="price-old">¥ ${product.globalprice}</span>
			</div>
			<div class="cart">
				<a href="product/productDetail.html?productId=${product.productId}"" class="button">
					<span>查看详情</span>
				</a>
			</div>
			<div class="wishlist">
				 
			</div>
			<div class="compare">
				 
			</div>
		</div>
		<div class="left">
			<div class="image">
				<a
					href="product/productDetail.html?productId=${product.productId}">
					<img id="img_35" src="<%=basePath %>/image_upload/${product.smallImage.path}" title="${product.productName}"
						alt="${product.productName}">
				</a>
			</div>
			<div class="name">
				<a href="product/productDetail.html?productId=${product.productId}">${product.productName}</a>
			</div>
			<div class="description">
				${product.briefDescription}
			</div>
			<div class="rating">
			</div>
		</div>
	</li>
	</c:forEach>
	</ul>
  </div>
  
  <div class="pagination"><div class="results">Showing 1 to <%=totlePageSize %> of <%=currentPageNumber %> (totle <%=totleItemSize %> items)</div></div>
      
        </form>
   </c:if>
        
        </div>




<script type="text/javascript">
function display(view) {
	if (view == 'list') {
		$('.product-grid ').attr('class', 'product-list');
		
		$('.product-list ul li').each(function(index, element) {
			html  = '<div class="right">';
				html += '  <div class="price">' + $(element).find('.price').html() + '</div>';
			html += '  <div class="cart">' + $(element).find('.cart').html() + '</div>';
			html += '  <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
			html += '  <div class="compare">' + $(element).find('.compare').html() + '</div>';
		
			html += '</div>';			
			
			html += '<div class="left">';
			
			var image = $(element).find('.image').html();
			
			if (image != null) { 
				html += '<div class="image">' + image + '</div>';
			}
			
	
					
			html += '  <div class="name" style="height:40px;">' + $(element).find('.name').html() + '</div>';
			html += '  <div class="description">' + $(element).find('.description').html() + '</div>';
			
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
				
			html += '</div>';

						
			$(element).html(html);
		});		
		
		$('.display').html('<b>Display:</b> <div id="list_b"></div> <a id="grid_a" onclick="display(\'grid\');">Grid</a>');
		
		$.cookie('display', 'list'); 
	} else {
		$('.product-list').attr('class', 'product-grid');
		
		$('.product-grid ul li').each(function(index, element) {
			html = '';
					
			var image = $(element).find('.image').html();
			
			if (image != null) {
				html += '<div class="image">' + image + '</div>';
			}
			
		html += '<div class="name">' + $(element).find('.name').html() + '</div>';
			
			
			var price = $(element).find('.price').html();
			
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
	
			html += '<div class="description">' + $(element).find('.description').html() + '</div>';
			
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
						
			html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
			html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
			html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
			
			$(element).html(html);
		});	
					
		$('.display').html('<b>Display:</b> <a id="list_a" onclick="display(\'list\');">List</a>  <div id="grid_b"></div>');
		
		$.cookie('display', 'grid');
	}
}
view = $.cookie('display');
if (view) {
	display(view);
} else {
	display('list');
}
</script> 
<script type="text/javascript">
		(function($){$.fn.equalHeights=function(minHeight,maxHeight){tallest=(minHeight)?minHeight:0;this.each(function(){if($(this).height()>tallest){tallest=$(this).height()}});if((maxHeight)&&tallest>maxHeight)tallest=maxHeight;return this.each(function(){$(this).height(tallest)})}})(jQuery)
	$(window).load(function(){
		if($(".cat-height").length){
		$(".cat-height").equalHeights()}
	})
</script>
</div>
     <div class="footer-wrap">
	    <%@ include file="footer.jsp" %>
     </div>

</div>
</body></html>